<template>
	<view>
		<view class="goshop-ranking-bg">
			<view>
				<image class="goshop-ranking-img" src="../../../static/imgs/common/leaderboard_bg.png"></image>
			</view>
			<view class="goshop-ranking-tabs">
				<view @click="tabClick(index)" v-for="(item,index) in tabList" :id="'item-id-'+index" :key="index"
					:class="['goshop-ranking-tabs-item',current==index?'active':'']">{{item.name}}
				</view>
			</view>
		</view>
		<view class="goshop-ranking-body">
			<view class="goshop-ranking-title">
				<view>{{rankingText}}</view>
				<view>{{memberText}}</view>
				<view v-if="locale === 'zh-Hans'">{{areaText}}</view>
			</view>
			<view class="goshop-ranking-wrap" v-for="(item,index) in rankingListData" :key="index">
				<view>
					<view v-if="index === 0" class="iconfont iconfont-rank_one goshop-img-32"></view>
					<view v-if="index === 1" class="iconfont iconfont-rank_two goshop-img-32"></view>
					<view v-if="index === 2" class="iconfont iconfont-rank_three goshop-img-32"></view>
					<view class="goshop-img-32 row-cen-cen" v-if="index > 2">{{index+1}}</view>
				</view>
				<view class="goshop-ranking-user">
					<view>
						<image class="goshop-img-radius-32" :src="item.avatar"></image>
					</view>
					<view class="u-m-l-10">
						{{item.nickname}}
					</view>
					<view class="u-m-l-10">
						<goshop-level :data="item.levelInfo"></goshop-level>
					</view>
				</view>
				<view v-if="locale === 'zh-Hans'">
					<view>{{item.provinceName}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {rankingList} from '@/common/http.api.js'
	export default {
		data() {
			return {
				current:0,
				rankingListData:[],
				tabList: [{
					name: '',
					type:1
				}, {
					name: '',
					type:2
				}, {
					name: '',
					type:3
				}],
				params: {
					type: 1,
				},
				rankingText:'',
				memberText:'',
				areaText:'',
				locale:'',
			};
		},
		onShow(){
		  this.getRankingList();
		  this.refresh();
		  this.locale = this.$i18n.locale;
		},
		methods:{
			refresh(){
				this.tabList[0].name = this.$t('ranking.consumption.text');
				this.tabList[1].name = this.$t('ranking.standings.text');
				this.tabList[2].name = this.$t('ranking.charm.text');
				this.rankingText = this.$t('ranking.ranking.text');
				this.memberText = this.$t('ranking.member.text');
				this.areaText = this.$t('ranking.area.text');
			},
			tabClick(e) {
				this.current = e;
				this.params.type = this.tabList[e].type;
				this.$nextTick(() => {
					this.getRankingList();
				})
			},
			getRankingList(){
				rankingList(this.params).then((res)=>{
					this.rankingListData = res.data;
			    }).catch(error=>{
				   console.error(error)
			    })
			}
		}
	}
</script>

<style lang="scss">
.goshop-ranking-user{
	display: flex;
	justify-content: center;
	align-items: center;
	flex: 3;
}
.goshop-ranking-img{
	width: 100%;
}
.goshop-ranking-tabs{
	background-color: $goshop-color-primary;
}
.goshop-ranking-bg{
	background-color: $goshop-color-primary;
}
.goshop-ranking-tabs{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 80rpx;
	.goshop-ranking-tabs-item {
			display: inline-block;
			//width: 15%;
			margin-right: 20rpx;
			text-align: center;
			line-height: 80rpx;
			color: $goshop-color-auxiliary-one;
			&.active {
				color: $goshop-color-auxiliary-four;
				font-weight: bold;
			}
		}
}
.goshop-ranking-body{
	background-color: $goshop-color-auxiliary-one;
	margin-top: 20rpx;
	.goshop-ranking-title{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
	}
	.goshop-ranking-wrap{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx;
	}
}
</style>
